/* 
1 页面挂载完毕
  1 百度地图定位在当前城市
    1 从redux中 获取到 当前城市的名称 | 当前城市的经纬度 
    2 百度地图的定位  map.centerAndZoom()
  2 获取当前城市的下面 区 的房源数据 
    1 将当前的城市名称 发送到后台 返回 该城市名称的一个 id 
    2 再根据城市的id 获取该城市下的房源数据 
  3 讲房源数据 画在地图上 
    1 利用了百度地图内 描绘覆盖物功能 文档 => 百度地图的 示例demo中 => 覆盖物 =>文字标签
    2 修改一下他们的外观  通过切换class的方式来实现样式 

2 点击 label 事件触发
  1 放大地图 和 定位地图  centerAndZoom
  2 加载 被点击的房源 下的数据 
    1 发送请求 获取 被点击的房源 下面的 新的房源数据
    2 将数据描绘到页面中
    3 以上的两个功能 其实就相当于 第一个大功能里面的小功能
      1 获取地区的id 
      2 再根据id 获取 该地区下面房源 数组
      3 把数组描绘出来 = 圆圈 label
      3 给label绑定点击事件
      4 点击事件触发  
        1 放大地图 和定位地图
        2 加载被点击的房源下的数据
    4 思考如何封装和复用代码?
      1 提取出来 相同的部分 放入函数
      2 提取不来 不同的部分 变成形参 
        1 要获取的房源的id  形参
        2 要定位和放大的 位置的 经纬度  形参 

  3 隐藏被点击的房源的 之外 房源数据 
    map.clearOverlays(); 

3 根据地图被显示的次数不一样 总结以下的属性的 值
  1 地图第一次显示的时候 
    放大倍数 10 
    label标签 圆圈
    点击 label 加载下一层
  2 地图第二次显示的时候 
    放大倍数 12 
    label标签 圆圈
    点击 label 加载下一层
  3 地图第三次显示的时候
    放大倍数 15
    label 标签 矩形 
    点击 label 显示详情房源信息列表 

4 实现 3 的 现象

5 闭包! 
  1 优点
    1 屏蔽 一些代码的细节 => 无法在外部 修改闭包内的数据 
  2 缺点
    1 内存泄漏 

6 点击 小区的时候 需要显示div 和 加载该小区的详细的房源列表数据
  1 接口   /houses?cityId=xxx 
  2 编写标签和样式

7 拖动地图的时候 需要 隐藏房屋列表
  1 给map对象 绑定一个拖拽事件  dragstart
 
  


 */




import React, { Component } from 'react';
import { NavBar, Icon } from "antd-mobile";
import indexCss from "./index.module.scss";
import { connect } from "react-redux";
import axios, { baseURL } from "../../utils/request";
import HouseItem from "../../components/HouseItem";
console.log("地图找房被加载了")

const BMap = window.BMap;
let map = null;

class index extends Component {

  ZoomFunc = (function () {
    let arr = [{ level: 0, zoom: 10, cls: "circle" }, { level: 1, zoom: 12, cls: "circle" }, { level: 2, zoom: 15, cls: "rect" }]
    let index = -1;
    return function () {
      index++;
      return arr[index];
    }
  })()

  state = {
    // 房屋列表
    houseList: [],
    // 是否要显示房屋列表
    showHouse: false
  }


  async componentDidMount() {
    const { cityName } = this.props;
    map = new BMap.Map("container");
    map.addControl(new BMap.NavigationControl());
    map.addControl(new BMap.ScaleControl());

    // 给地图绑定一个拖拽事件
    map.addEventListener("dragstart", () => {
      this.setState({ showHouse: false });
    })
    const id = (await axios.get("/area/info?name=" + cityName)).data.body.value;
    this.drawHouse(id, cityName);


  }

  // 根据房源来放大和描绘数据
  drawHouse = async (id, currentPosition) => {
    const zoomObj = this.ZoomFunc();
    map.centerAndZoom(currentPosition, zoomObj.zoom);
    const list = (await axios.get("/area/map?id=" + id)).data.body;
    list.forEach(v => {
      const point = new BMap.Point(v.coord.longitude, v.coord.latitude);
      const opts = {
        position: point
      }
      const label = new BMap.Label(`<div class="${indexCss[zoomObj.cls]}" ><span>${v.label}</span><span>${v.count}套</span> </div>`, opts);  // 创建文本标注对象
      label.setStyle({
        border: "null",
        backgroundColor: "transparent"
      });
      label.addEventListener("click", () => {
        // 1 加载下一层
        if (zoomObj.level < 2) {
          this.drawHouse(v.value, point);
          // 清除旧的覆盖物
          setTimeout(() => {
            map.clearOverlays();
          }, 0);
        } else {
          console.log("从下往上显示房源信息列表");
          this.getHouses(v.value);
          this.setState({ showHouse: true });
        }
      })
      map.addOverlay(label);
    })
  }


  // 获取小区的房屋数据 
  getHouses = async (id) => {
    const houseList = (await axios.get("/houses?cityId=" + id)).data.body.list;
    this.setState({ houseList });
  }


  render() {
    const { houseList, showHouse } = this.state;
    return (
      <div className={indexCss.map_found} >
        {/* 1 导航栏 开始 */}
        <NavBar
          mode="light"
          icon={<Icon type="left" />}
          onLeftClick={() => this.props.history.go(-1)}
        >地图找房</NavBar>
        {/* 1 导航栏 结束 */}
        {/* 2 内容 开始 */}
        <div className={indexCss.map_main}>
          {/* 2.1 百度地图 开始 */}
          <div id="container" className={indexCss.container} ></div>
          {/* 2.1 百度地图 结束 */}
          {/* 2.2 房屋列表 结束 */}
          {showHouse && <div className={indexCss.houses_list}>
            <div className={indexCss.houses_list_title}>
              <span>房屋列表</span>
              <span>更多房源</span>
            </div>
            <div className={indexCss.houses_list_content}>
              {houseList.map((v, i) => <div key={i} ><HouseItem item={v}  /></div>)}
            </div>
          </div>} 
          {/* 2.2 房屋列表 结束 */}
        </div>
        {/* 2 内容 结束 */}
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    cityName: state.mapReducer.city.name
  }
}

export default connect(mapStateToProps)(index);









